<template>
    <el-container>
        <el-header>
            <div><img src="../../pictures/logo.png" width="68px" height="60px"> <span>科记：记录精彩校园生活</span></div>
            <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#99ecff"
            text-color="black"
            active-text-color="#f59456">
                <el-menu-item class="grid-content" index="1">
                    <el-link href="#/home" target="_self" underline="false">科记主页</el-link>
                </el-menu-item>
                <el-menu-item class="grid-content" index="2">
                    <el-link href="#/blog" target="_self" underline="false">校园博客</el-link>
                </el-menu-item>
                <el-submenu class="grid-content" index="3">
                    <template slot="title">生活助手</template>
                    <el-menu-item index="3-1"><a href="#/blog" target="_self">生活经验</a></el-menu-item>
                    <el-menu-item index="3-2"><a href="#/blog" target="_self">美食分享</a></el-menu-item>
                    <el-menu-item index="3-3"><a href="#/question" target="_self">校园问答</a></el-menu-item>
                </el-submenu>
                <el-submenu class="grid-content" index="4">
                    <template slot="title">班级事务</template>
                    <el-menu-item index="4-1"><a href="#/blog" target="_self">班级通知</a></el-menu-item>
                    <el-menu-item index="4-2"><a href="#/account" target="_self">班级账目</a></el-menu-item>
                </el-submenu>
                <el-menu-item class="grid-content" index="5">
                    <el-link href="#/information" target="_self" underline="false">个人信息</el-link>
                </el-menu-item>
                <el-menu-item class="grid-content">
                    <div display: center>
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-select v-model="select" slot="prepend" placeholder="请选择">
                            <el-option label="校园博客" value="1"></el-option>
                            <el-option label="生活助手" value="2"></el-option>
                            <el-option label="班级通知" value="3"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu-item>
                <el-menu-item>
                    <div><el-col :span="12">
                            <div class="demo-basic--circle">
                                <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
                            </div>
                        </el-col> 
                    </div>
                </el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>

        <el-main>
            <div class="container" id="body">
                <div class="profile-card">
                    <div class="avatar">
                        <img src="https://via.placeholder.com/100" alt="头像">
                    </div>
                    <div class="info">
                        <h1 id="username">张三</h1>
                        <p id="class">班级:软件工程一班</p>
                        <p id="role">职务:班长</p>
                        <p id="birthday">生日:2000-01-01</p>
                        <p id="major">专业:软件工程</p>
                        <el-button id="edit-button" @click="edit()">编辑</el-button>
                    </div>
                </div>
            </div>
            <div id="upload">
                上传新头像
                <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',//与字体颜色有关的值
        input: '',//搜索栏的输入
        select: '',//搜索栏的选择
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",//头像的访问路径
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
        edit() {
            let username = prompt('请输入新的用户名:', document.getElementById('username').textContent);
            if (username) {
                document.getElementById('username').textContent = username;
            }

            let classInfo = prompt('请输入新的班级:', document.getElementById('class').textContent.replace('班级：', ''));
            if (classInfo) {
                document.getElementById('class').textContent = '班级：' + classInfo;
            }

            let role = prompt('请输入新的职务:', document.getElementById('role').textContent.replace('职务：', ''));
            if (role) {
                document.getElementById('role').textContent = '职务：' + role;
            }

            let birthday = prompt('请输入新的生日 (格式: YYYY-MM-DD):', document.getElementById('birthday').textContent.replace('生日：', ''));
            if (birthday) {
                document.getElementById('birthday').textContent = '生日：' + birthday;
            }

            let major = prompt('请输入新的专业:', document.getElementById('major').textContent.replace('专业：', ''));
            if (major) {
                document.getElementById('major').textContent = '专业：' + major;
            }},
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
            }
  }
  
</script>

<style>
    .el-header{
        background: #99ecff;
        display: flex;
        padding-left: 0;
        justify-content: space-between;
        color: black;
        font-size: 20px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    #body {
        height: 100%;
        margin-left: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f4f4f4;
    }
    .container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
    }

    .profile-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        padding: 20px;
        gap: 20px;
    }

    .avatar img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }

    .info {
        flex: 1;
    }

    .info h1 {
        margin: 0;
        font-size: 24px;
    }

    .info p {
        margin: 5px 0;
    }

    button {
        margin-top: 20px;
        padding: 10px 15px;
        font-size: 16px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }

    .upload {
        display: flex;
        align-items: center;
        margin-left: 500px;
    }
</style>